<!DOCTYPE html>
<html lang="en" class="app" xmlns:th="http://www.thymeleaf.org">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

</head>
<body class="">


              <section class="hbox stretch" style="margin-left: -30px"  id="ajaxContent" th:fragment="genres">
                <!-- side content -->
<!--                侧边选择-->
                <aside class="aside bg-light dk" id="sidebar">
                  <section class="vbox animated fadeInUp">
                    <section class="scrollable hover">
                      <div class="list-group no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                        <a href="javascript:;" onclick="ajaxRequest('/user/ajax/genres')" th:class="${type} eq null?'list-group-item active':'list-group-item'">
                          全部
                        </a>
                        <a href="javascript:;" onclick="ajaxRequest('/user/ajax/genres?type=华语')" th:class="${type} eq '华语'?'list-group-item active':'list-group-item'">
                          华语
                        </a>
                        <a href="javascript:;" onclick="ajaxRequest('/user/ajax/genres?type=摇滚')" th:class="${type} eq '摇滚'?'list-group-item active':'list-group-item'">
                          摇滚
                        </a>
                        <a href="javascript:;" onclick="ajaxRequest('/user/ajax/genres?type=民谣')" th:class="${type} eq '民谣'?'list-group-item active':'list-group-item'">
                          民谣
                        </a>
                        <a href="javascript:;" onclick="ajaxRequest('/user/ajax/genres?type=电子')" th:class="${type} eq '电子'?'list-group-item active':'list-group-item'">
                          电子
                        </a>
                        <a href="javascript:;" onclick="ajaxRequest('/user/ajax/genres?type=轻音乐')" th:class="${type} eq '轻音乐'?'list-group-item active':'list-group-item'">
                          轻音乐
                        </a>
                        <a href="javascript:;" onclick="ajaxRequest('/user/ajax/genres?type=纯音乐')" th:class="${type} eq '纯音乐'?'list-group-item active':'list-group-item'">
                          纯音乐
                        </a>
                        <a href="javascript:;" onclick="ajaxRequest('/user/ajax/genres?type=钢琴曲')" th:class="${type} eq '钢琴曲'?'list-group-item active':'list-group-item'">
                          钢琴曲
                        </a>

                      </div>
                    </section>
                  </section>
                </aside>
                <!-- / side content -->
                <section id="ajaxSongList">
                  <section class="vbox">
                    <section class="scrollable padder-lg">
                      <h2 class="font-thin m-b">Acoustic</h2>
                      <div class="row row-sm">


                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" th:each="songListBean:${songListBeanList}">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">


<!--                                  <a href="#" class="audio">-->
<!--                                    <audio th:src="E:\Music\LiSA (織部里沙) - 紅蓮華.mp3" ></audio>-->
<!--                                    <i class="icon-control-play i-2x "></i>-->
<!--                                  </a>-->


                                </div>
                              </div>
                              <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/songListMusic?id='+[[${songListBean.id}]])"><img th:src="@{${songListBean.image}}" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/songListMusic?id='+[[${songListBean.id}]])" data-bjax data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">[[${songListBean.title}]]</a>
                              <a href="#" data-bjax data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">[[${songListBean.provider}]]</a>
                            </div>
                          </div>
                        </div>

                      </div>
<!--                      <ul class="pagination pagination">-->
<!--                        <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>-->
<!--                        <li class="active"><a href="#">1</a></li>-->
<!--                        <li><a href="#">2</a></li>-->
<!--                        <li><a href="#">3</a></li>-->
<!--                        <li><a href="#">4</a></li>-->
<!--                        <li><a href="#">5</a></li>-->
<!--                        <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>-->
<!--                      </ul>-->
                    </section>                    
                  </section>



 </body>
</html>